axios.defaults.baseURL = "http://cba.itlike.com/public/index.php?s=/api/";
const baseURL = "detail.html";

axios.get("page/detail").then(({ data }) => {
  if (data.status == 200) {
    let dataVal = data.data.pageData.items;
    console.log(dataVal);
    //图片轮播
    const carouselData = dataVal[1].data;
    const swiper = document.querySelector(".swiper-wrapper");
    swiper.innerHTML = carouselData
      .map((item) => {
        const {
          imgUrl,
          link: {
            param: {
              query: { goodsId },
            },
          },
        } = item;
        console.log(goodsId);
        return `
        <div class="swiper-slide">
          <a href="detail.html?goodsId=${goodsId}">
            <img src="${imgUrl}" alt="" />
          </a>
        </div>
      `;
      })
      .join("");

    var mySwiper = new Swiper(".swiper", {
      speed: 400,
      loop: true,
      autoplay: {
        disableOnInteraction: false,
        delay: 800,
      },
      pagination: {
        el: ".swiper-pagination",
      },
      centeredSlides: true,
      observer: true, //修改swiper自己或子元素时，自动初始化swiper
      //observeParents: true, //修改swiper的父元素时，自动初始化swiper
      observeParents: true, //修改swiper的父元素时，自动初始化swiper
      observerUpdate: true,
    });

    //店铺公告
    const shopAd = dataVal[2];
    const adCont = document.querySelector(".adCont p");
    adCont.innerHTML = shopAd.params.text;

    //导航组
    const nav = dataVal[3].data;
    const section1 = document.querySelector(".section1");
    section1.innerHTML = nav
      .map((item) => {
        const { imgUrl, link } = item;
        const linkVal = link ? link.param.path : "";
        return `
            <a href="category.html">
              <div>
                <img src="${imgUrl}" alt="" />
              </div>
              <p>${item.text}</p>
            </a>
        `;
      })
      .join("");

    //图片
    const imgData = dataVal[4].data[0];
    const section2 = document.querySelector(".section2");
    const {
      imgUrl,
      link: {
        param: { path },
      },
    } = imgData;

    section2.innerHTML = `
      <a href="${path}">
        <img src="${imgData.imgUrl}" alt="" />
      </a>
    `;

    //猜你喜欢-商品组
    const list = dataVal[6].data;
    const section3Ul = document.querySelector(".section3Ul");
    section3Ul.innerHTML = list
      .map(function (item, index) {
        const {
          goods_image,
          goods_name,
          goods_price_max,
          line_price_max,
          line_price_min,
          goods_sales,
          goods_id,
        } = item;

        let resVal = line_price_min == 0.0 ? "none" : "inline-block";

        return `
        <li>
            <a href="detail.html?goodsId=${goods_id}">
              <img src="${goods_image}" alt="" />
              <div class="goodCont">
                <h3>${goods_name}</h3>
                <p class="selled">已售${goods_sales}件</p>
                <p class="price">￥${goods_price_max} <span style="display: ${resVal}">￥${line_price_min}</span></p>
              </div>
            </a>
          </li>
      `;
      })
      .join("");
  }
});
